<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Prompts Test</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="../style.css" />
    <link rel="icon" href="data:," />
    <style>
      math-field,
      textarea {
        margin-top: 1em;
        margin-bottom: 1em;
      }
      math-field::part(prompt) {
        background: palegoldenrod;
      }
      math-field {
        --prompt-min-width: 50px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Prompts Test</h1>
      <ul>
        <li><a href="../smoke/">Smoke</a></li>
        <li>
          <a href="../virtual-keyboard/">Virtual Keyboard</a>
        </li>
        <li>
          <a href="../mathfield-states/">States</a>
        </li>
        <li class="current">
          <a href="../prompts/">Prompts</a>
        </li>
      </ul>
    </header>
    <main>
      <div style="display: flex; gap: 1em; flex-wrap: wrap; flex-flow: column">
        <math-field id="mf-prompt" readonly
          >x=\frac{\placeholder[numerator]{x}}{\placeholder[denominator]{y}}}}</math-field
        >
        <textarea>textarea</textarea>
        <math-field
          >x=\frac{\placeholder{33}}{\placeholder{}}+\frac{1}{}+\placeholder{}</math-field
        >
        <math-field readonly
          >x=\frac{\placeholder[numer][incorrect]{1+x}}{\placeholder[denom][correct]{3}}+\placeholder[other]{\frac{x^2}{\sqrt{x}}}</math-field
        >

        <textarea>textarea</textarea>

        <textarea disabled>disabled textarea</textarea>

        <textarea readonly>readonly textarea</textarea>
      </div>
    </main>

    <script type="module">
      import { MathfieldElement } from "/dist/mathlive.mjs";

      const prompt = document.getElementById("mf-prompt");
      prompt.addEventListener("placeholder-change", (ev) => {
        console.log("placeholder-change", ev.detail);
      });
      // mf.registers = {
      //   ...mf.registers,
      //   ...{ fboxsep: { dimension: 10, unit: 'pt' } },
      // };
      prompt.addEventListener("input", (evt) => {
        const prompts = prompt.getPrompts();
        console.log(prompts);
        prompts.forEach((x) =>
          console.log("Prompt", x, prompt.getPromptValue(x))
        );
      });

      document.querySelectorAll("math-field").forEach((x) => {
        x.addEventListener("focusin", logEvent, true);
        x.addEventListener("move-out", logEvent, true);
        x.addEventListener("focusout", logEvent, true);
      });

      // document.querySelectorAll('math-field, textarea').forEach((x) => {
      //   x.addEventListener('beforeinput', logEvent);
      //   x.addEventListener('input', logEvent);
      //   x.addEventListener('keypress', logEvent);
      //   x.addEventListener('keydown', logEvent);
      //   x.addEventListener('keyup', logEvent);
      //   x.addEventListener('click', logEvent);
      //   x.addEventListener('focus', logEvent);
      //   x.addEventListener('focusin', logEvent);
      //   x.addEventListener('focusout', logEvent);
      //   x.addEventListener('move-out', logEvent);
      //   x.addEventListener('focus-in', logEvent);
      //   x.addEventListener('focusout', logEvent);
      //   x.addEventListener('blur', logEvent);
      // });

      function logEvent(evt) {
        const stackTraceFrames = String(new Error().stack)
          .replace(/^Error.*\n/, "")
          .split("\n")
          .map((x) => x.replace(/\(.*\)/, ""));
        stackTraceFrames.shift();

        console.log(evt.type, (evt.target?.id || evt.target?.tagName) ?? evt);
        if (stackTraceFrames.length > 0)
          console.log(stackTraceFrames.join("\n"));
        // console.log(evt);
        // updateButtons();
      }
    </script>
  </body>
</html>
